<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				// 点击按钮以后弹出一个内容
				// 获取按键对象
				var btn01 = document.getElementById("btn01");
				
				// 使用 对象.事件 = 函数 的形式绑定响应函数,它只能同时为一个元素的一个事件绑定一个响应函数,不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的
				
				// 为btn01绑定一个单机响应函数
				// btn01.onclick = function(){
				// 	alert(1);
				// };
				
				// 为btn01绑定第二个响应函数
				// btn01.onclick = function(){
				// 	alert(2);
				// };
				
				// addEventListener() 通过这个方法也可以为元素绑定响应函数
					// 参数: 1.事件的字符串,不要on 2.回调函数,当事件触发时函数会被调用 3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
				// 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
				// 这个方法不支持IE8及以下的浏览器
				// btn01.addEventListener("click",function(){
				// 	alert(1);
				// },false);
				
				// btn01.addEventListener("click",function(){
				// 	alert(2);
				// },false);
				
				// btn01.addEventListener("click",function(){
				// 	alert(3);
				// },false);
				
				// attachEvent() 在IE8中可以使用attachEvent()来绑定事件
				// 	参数: 1.事件的字符串,要on 2.回调函数
				// 	这个方法也可以同时为一个事件绑定多个处理函数,不同的是它是后绑定先执行,执行顺序和addEventListener()相反
				// btn01.attachEvent("onclick",function(){
				// 	alert(1);
				// });
				
				// btn01.attachEvent("onclick",function(){
				// 	alert(2);
				// });
				
				// btn01.attachEvent("onclick",function(){
				// 	alert(3);
				// });
				
				// btn01.addEventListener("click",function(){
				// 	alert(this);
				// },false);
				
				// btn01.attachEvent("onclick",function(){
				// 	alert(this);
				// });
				
				bind(btn01,"click",function(){
					alert(1);
				});
			};
			
			// 定义一个函数,用来为指定元素绑定响应函数
			// addEventListener()中的this,是绑定事件的对象
			// attachEvent()中的this,是window
			// 需要统一两个方法this
			// 参数: obj 要绑定事件的对象  eventStr 事件的字符串(不要on)  callback 回调函数
			function bind(obj,eventStr,callback){
				if(obj.addEventListener){
					// 大部分浏览器兼容的方式
					obj.addEventListener(eventStr,callback,false);
				}else{
					// this是谁由调用方式决定
					// callback.call(obj)
					// IE8及以下
					obj.attachEvent("on"+eventStr,function(){
						// 在匿名函数中调用回调函数
						callback.call(obj);
					});
				}			
			}
		</script>
	</head>
	<body>
		<button id="btn01">按钮</button>
	</body>
</html>
